import img from '@/assets/bottom_arrow.png';
import { getRecruitment } from '@/services/center';
import { useRequest } from 'ahooks';
import { Carousel, Collapse, type CollapseProps } from 'antd';
import { Helmet, useIntl } from 'umi';

const Work: React.FC = () => {
  const intl = useIntl();
  const { data } = useRequest(getRecruitment);
  const list = data?.data;
  const isEn = intl.locale == 'en-US';
  const items: CollapseProps['items'] = list?.map((item: any) => {
    const { recruitmentContent, recruitmentTitle, recruitmentContentEn, recruitmentTitleEn, id } =
      item;
    const label = isEn ? recruitmentTitleEn : recruitmentTitle;
    const content = isEn ? recruitmentContentEn : recruitmentContent;
    return {
      key: id,
      label,
      children: <div dangerouslySetInnerHTML={{ __html: content || '' }} />,
    };
  });
  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.meta_title' })}</title>
      </Helmet>
      <div className="work">
        <div className="work_top">
          <div className="work_top_topBg" />
          <div className="common" style={{ position: 'relative', zIndex: 2 }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 30, color: '#333', fontWeight: 'bold', paddingTop: 65 }}>
                {intl.formatMessage({ id: 'center.work_title' })}
              </div>
              <div
                style={{
                  width: 800,
                  fontSize: 16,
                  color: '#666',
                  margin: '10px auto 40px ',
                  lineHeight: '26px',
                }}
              >
                {intl.formatMessage({ id: 'center.work_word' })}
              </div>
            </div>
            <Carousel autoplay style={{ marginBottom: 40 }} slidesToShow={5} arrows infinite>
              {new Array(5).fill(0).map((_, index) => {
                return (
                  // eslint-disable-next-line react/no-array-index-key
                  <div key={index} className="about_see_swiper_item">
                    <img
                      width={'100%'}
                      height={148}
                      style={{ borderRadius: 4 }}
                      src={require(`@/assets/work_s${index + 1}.jpg`)}
                    />
                  </div>
                );
              })}
            </Carousel>
          </div>
          <img src={img} className="work_top_bottomBg" />
        </div>
        <div className="work_content common">
          <div
            style={{
              fontSize: 30,
              color: '#333',
              textAlign: 'center',
              fontWeight: 'bold',
              marginBottom: 45,
            }}
          >
            {intl.formatMessage({ id: 'center.work_join' })}
          </div>
          <Collapse
            className="work_content_collapse"
            expandIconPosition="end"
            items={items}
            ghost
            bordered={false}
            defaultActiveKey={['1']}
          />
        </div>
      </div>
    </>
  );
};

export default Work;
